<template>
  <div class="cardbg">
      <div class="card">

    <!-- 顶部导航 -->
    <el-row style="height: 30px;" align="middle">
          <div style="width: 6px; height:20px;background-color:#2984f8;border-radius: 5px;margin-right: 10px;">
          </div>
          <span style="font-size: 18px;">居民详情</span>
        </el-row>
    <!-- 选项卡 -->
    <el-tabs v-model="activeName">
      <el-tab-pane  name="health-archive">
        <template #label>
<span style="font-size: 20px;">健康档案</span>
        </template>
        <!-- 居民信息 -->
        <div class="section">
          <h2>居民信息</h2>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="info-item">
                <span>居民编号</span>
                <span>{{ residentInfo.id }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>姓名</span>
                <span>{{ residentInfo.name }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>头像</span>
                <el-avatar :size="small" :icon="residentInfo.avator ? '' : 'user'" :src="residentInfo.avator"></el-avatar>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>身份证号</span>
                <span>{{ residentInfo.idcard }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>手机号码</span>
                <span>{{ residentInfo.tel }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>现居地</span>
                <span>{{ residentInfo.address }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>登录密码</span>
                <span>{{  }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>行政区划</span>
                <span>{{ residentInfo.administrativeDivision }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>居民标签</span>
                <span v-for="(tag, index) in residentInfo.tags" :key="index">{{ tag }} </span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>性别</span>
                <span>{{ residentInfo.gender }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>出生日期</span>
                <span>{{ residentInfo.birthDate }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>籍贯</span>
                <span>{{ residentInfo.nativePlace }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>民族</span>
                <span>{{ residentInfo.nationality }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>文化程度</span>
                <span>{{ residentInfo.education }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>婚姻状况</span>
                <span>{{ residentInfo.maritalStatus }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>职业</span>
                <span>{{ residentInfo.occupation }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>工作单位</span>
                <span>{{ residentInfo.workUnit }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>紧急联系人</span>
                <span>{{ residentInfo.emergencyContact }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>联系人电话</span>
                <span>{{ residentInfo.emergencyContactPhone }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>户籍类型</span>
                <span>{{ residentInfo.householdType }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>费用类型</span>
                <span>{{ residentInfo.paymentType }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>定点医疗单位</span>
                <span>{{ residentInfo.designatedHospital }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>来源</span>
                <span>{{ residentInfo.source }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 健康信息 -->
        <div class="section">
          <h2>健康信息</h2>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="info-item">
                <span>身高</span>
                <span>{{ healthInfo.height }}cm</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>体重</span>
                <span>{{ healthInfo.weight }}kg</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>血型</span>
                <span>{{ healthInfo.bloodType }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>RH阴性</span>
                <span>{{ healthInfo.rhNegative ? '是' : '否' }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>过敏史</span>
                <span>{{ healthInfo.allergyHistory }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>既往史</span>
                <span>{{ healthInfo.pastMedicalHistory }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>就诊史</span>
                <span>{{ healthInfo.medicalVisitHistory }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>家族病史</span>
                <span>{{ healthInfo.familyMedicalHistory }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 家庭成员 -->
        <div class="section">
          <h2>家庭成员</h2>
          <el-row :gutter="20">
            <el-col :span="12" v-for="(familyMember, index) in familyMembers" :key="index">
              <div class="family-item">
                <el-avatar :size="small" :icon="familyMember.avatar ? '' : 'user'" :src="familyMember.avatar"></el-avatar>
                <span>{{ familyMember.name }} {{ familyMember.age }}岁</span>
                <span>关系：{{ familyMember.relationship }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane  name="health-record">
        <template #label>
<span style="font-size: 20px;">健康记录</span>
        </template>
        <p>健康记录内容待完善</p>
      </el-tab-pane>
      <el-tab-pane  name="contract-info">
        <template #label>
<span style="font-size: 20px;">签约信息</span>
        </template>
        <p>签约信息内容待完善</p>
      </el-tab-pane>
      <el-tab-pane  name="service-record">
        <template #label>
<span style="font-size: 20px;">服务记录</span>
        </template>
        <p>服务记录内容待完善</p>
      </el-tab-pane>
    </el-tabs>
    <!-- 底部按钮 -->
    <el-row class="footer">
      <el-col :span="6">
        <el-button type="primary" @click="editProfile">编辑档案信息</el-button>
      </el-col>
      <el-col :span="6">
        <el-button @click="goBack">返回</el-button>
      </el-col>
    </el-row>
  </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'

// 获取当前路由实例
const route = useRoute()

// 从路由参数中获取居民信息
const residentInfo = ref(route.query)
console.log('residentInfo',residentInfo);

// 模拟健康信息数据
const healthInfo = ref({
  height: 169,
  weight: 49,
  bloodType: 'A型',
  rhNegative: false,
  allergyHistory: '无',
  pastMedicalHistory: '无',
  medicalVisitHistory: '无',
  familyMedicalHistory: '无'
})

// 模拟家庭成员数据
const familyMembers = ref([
  {
    name: '李清',
    age: 58,
    relationship: '父母',
    avatar: ''
  },
  {
    name: '王林',
    age: 28,
    relationship: '夫妻',
    avatar: ''
  }
])

const activeName = ref('health-archive')

// 模拟发消息方法
const sendMessage = () => {
  console.log('发送消息功能待实现，此处模拟触发')
}

// 模拟编辑档案信息方法
const editProfile = () => {
  console.log('编辑档案信息功能待实现，此处模拟触发')
}

// 模拟返回方法
const goBack = () => {
  console.log('返回功能待实现，此处模拟触发')
}
</script>

<style scoped>
.cardbg {
  width: 100%;
  height: 100%;
  background-color: #f2f7fb;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  /* 圆角 */
  border-radius: 10px;
  width: 80%;
  height: 100%;
  background-color: white;
  padding: 20px;
}

.container {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.title {
  font-size: 20px;
  font-weight: bold;
}

.section {
  margin-top: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 20px;
}

.info-item {
  margin-bottom: 10px;
}

.info-item span:first-child {
  /* 可以添加一些样式，比如设置宽度 */
  width: 80px;
font-size: 15px;
opacity: 0.6;
margin-right: 20px;
}

.family-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.footer {
  margin-top: 20px;
}

</style>